<template>
<div id="login">
    <ul class="user-item" ref="userItem">
        <li :class="{'list':true, 'no-gray':item.isOnline}"
            v-for="(item, index) in userlist"
            :key="item.uId"
            @click="handleUserLogin(item, index)"
        >
            <img :src="item.headImg" alt="">
            <h3 class="username">{{item.username}}</h3>
        </li>
        <li class="empty"></li><li class="empty"></li>
    </ul>
</div>
</template>

<script>
export default {
    name: "userList",
    props: ["userlist"],
    data() {
        return {
            self: false,
        }
    },
    methods: {
        // 选择用户登录
        handleUserLogin(user, index) {
            this.$root.userSelf = user
            user.equipment = this.getQuipment()
            this.socket.emit("login", user)
            localStorage.setItem("user", JSON.stringify(user))
        },

        // 获取设备名称(pc)
        getQuipment() {
            let ua = navigator.userAgent.toLocaleLowerCase();
            let browserType = null;
            if(ua.match(/edge/) != null) {
                browserType = "Edge";
            } else if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
                browserType = "IE";
            } else if (ua.match(/firefox/) != null) {
                browserType = "Firefox";
            } else if (ua.match(/ubrowser/) != null) {
                browserType = "UC";
            } else if (ua.match(/opera/) != null) {
                browserType = "欧朋";
            } else if (ua.match(/bidubrowser/) != null) {
                browserType = "Baidu";
            } else if (ua.match(/metasr/) != null) {
                browserType = "搜狗";
            } else if (ua.match(/chrome/) != null) {
                browserType = "Chrome";
            } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowser/) != null) {
                browserType = "QQ";
            } else if (ua.match(/maxthon/) != null) {
                browserType = "遨游";
            } else if (ua.match(/chrome/) != null) {
                var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
                function _mime(option, value) {
                var mimeTypes = navigator.mimeTypes;
                for (var mt in mimeTypes) {
                    if (mimeTypes[mt][option] == value) {
                        return true;
                        }
                    }
                    return false;
                }
                if (is360) {
                    browserType = '360';
                }
            } else if (ua.match(/safari/) != null) {
                browserType = "Safari";
            }
            return browserType
        }
    },
}
</script>

<style scoped>
#login {
    width: 100vw;
    height: 100vh;
}
.user-item {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
/* 宽度固定 */
.user-item .list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    margin: 20px 10px 0 0;
    text-align: center;
    border: 1px solid red;
    background-color: #b6ffc5;
    box-sizing: border-box;
    filter: grayscale(1);
} 
.user-item .empty {
    width: 120px;
    margin-right: 10px;
}
.user-item .no-gray {
    filter: grayscale(0);
}
.user-item .list>img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
}
.user-item .list .username {
    color: #323232;
    font-size: 20px;
    margin-top: 5px;
}
</style>